<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="true"/>

    <title>Debug</title>

    <link rel="stylesheet" href="../examples.css">
    <style>
      #result {
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: xx-large;
      }

      #editor {
        width: 100vw;
        height: calc(100vh - 160px);
      }
    </style>

    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <script type="text/javascript" src="../../dist/iink.min.js"></script>
  </head>

  <body>
    <div>
      <nav>
        <div class="button-div">
          <button id="undo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
            <img src="../assets/img/undo.svg">
          </button>
          <button id="redo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
            <img src="../assets/img/redo.svg">
          </button>
        </div>
        <div class="spacer"></div>
        <div id="parameters">
          <select id="level" disabled></select>
        </div>
      </nav>
      <div id="editor" touch-action="none"></div>
    </div>
    <script>
      const editorElement = document.getElementById('editor');
      const undoElement = document.getElementById('undo');
      const redoElement = document.getElementById('redo');
      const levelElement = document.getElementById('level');

      editorElement.addEventListener('changed', (event) => {
        undoElement.disabled = !event.detail.canUndo;
        redoElement.disabled = !event.detail.canRedo;
      });

      undoElement.addEventListener('click', () => {
        editorElement.editor.undo();
      });
      redoElement.addEventListener('click', () => {
        editorElement.editor.redo();
      });

      levelElement.addEventListener('change', (e) => {
        Object.keys(iink.Constants.Logger).forEach(function (key) {
          const name = iink.Constants.Logger[key];
          const logger = iink.LoggerConfig.getLogger(name);
          logger.setLevel(e.target.value, false);
        });
      });

      const defaultLevel = 'DEBUG';
      Object.keys(iink.Constants.Logger).forEach((key) => {
        const name = iink.Constants.Logger[key];
        const logger = iink.LoggerConfig.getLogger(name);
        logger.setLevel(defaultLevel, false);
      });

      /**
       * Initialize the list of available log levels
       */
      Object.keys(iink.Constants.LogLevel).forEach((key) => {
        const selected = defaultLevel === key;
        levelElement.options[levelElement.options.length] = new Option(iink.Constants.LogLevel[key], key, selected, selected);
      });
      levelElement.disabled = false;

      /**
       * Attach an editor to the document
       * @param {Element} The DOM element to attach the ink paper
       * @param {Object} The recognition parameters
       */
      iink.register(editorElement, {
        recognitionParams: {
          server: {
            scheme: 'https',
            host: 'webdemoapi.myscript.com',
            applicationKey: '515131ab-35fa-411c-bb4d-3917e00faf60',
            hmacKey: '54b2ca8a-6752-469d-87dd-553bb450e9ad'
          }
        }
      });

      window.addEventListener('resize', () => {
        editorElement.editor.resize();
      });
    </script>
  </body>

</html>